<script setup lang="ts">
import Menu from '@src/components/Menu.vue'
import AdminHeader from '@src/components/AdminHeader.vue'
</script>

<template>
  <div class="layout-container">
    <!--header-->
    <div class="header">
      <AdminHeader />
    </div>
    <!--content-container-->
    <div class="content-container">
      <!--menu-->
      <div class="menu">
        <Menu />
      </div>
      <!--content-->
      <div class="content">
        <el-scrollbar class="content-scroll">
          <div class="router-view"><RouterView /></div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
@layoutContainerHeight: 100vh;
@layoutContainerWidth: 100vw;
// 头部高度
@headerHeight: 60px;
@contentContainerHeight: calc(@layoutContainerHeight - @headerHeight);
//菜单宽度
@menuWidth: 200px;
@contentWidth: calc(@layoutContainerWidth - @menuWidth);

.layout-container {
  height: @layoutContainerHeight;
  width: @layoutContainerWidth;
  display: flex;
  flex-direction: column;
  background: linear-gradient(to right bottom, #fff, #909399);

  .header {
    height: @headerHeight;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
  }

  .content-container {
    height: @contentContainerHeight;
    width: 100%;
    display: flex;

    .menu {
      height: 100%;
      width: @menuWidth;
    }

    .content {
      height: 100%;
      width: @contentWidth;
      border-top: 1px solid var(--el-border-color);
      border-left: 1px solid var(--el-border-color);
      background: white;

      .content-scroll {
        max-height: 100%;

        .router-view {
          width: calc @contentWidth;
        }
      }
    }
  }
}
</style>
